<template>
  <table>
    <tr></tr>
  </table>

  <button @click="add">remove</button>
  <button @click="add1">add</button>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue'
import * as d3 from 'd3'
import { triangles3D } from 'd3-3d'

export default {
  data() {
    return {
      list: [
        [11975, 5871, 8916, 2868],
        [1951, 10048, 2060, 6171],
        [8010, 16145, 8090, 8045],
        [1013, 990, 940, 6907]
      ]
    }
  },
  methods: {
    add() {
      this.list.splice(0, 1)
    },
    add1() {
      this.list.push([2, 3, 4, 5])
    },
    step() {
      var matrix = this.list
      const update = d3
        .select('body')
        .select('table')
        .selectAll('tr')
        .data(matrix)
        .text((res) => {
          return `旧版本数据` + res.join(',')
        })

      update.exit().remove()
      update
        .enter()
        .append('tr')
        .text((res) => {
          return `新添加` + res.join(',')
        })
    },
    step2() {
      const update = d3.select('body').data(this.list)
    }
  },
  mounted() {
    this.step()

    setInterval((res) => {
      this.list[0][0] = 100 + Math.floor(Math.random() * 10)
      this.step()
    }, 1e3)

    this.step2()
  }
}
</script>
